<template>
  <div class="content">

    <!--    <div class="text main-text">欢迎使用111 {{ this.$project.projectName }}</div>-->
    <div class="text main-text">欢迎 {{
        role === 'admin' ? '管理员' : role === 'student' ? '学生' : role === 'mentor' ? '导师' : '用户'
      }}{{ $storage.get('userName') }} 使用系统
    </div>

  </div>
</template>
<script>
import router from '@/router/router-static'
import $storage from "../utils/storage";
import {getRole} from "@/utils/getrole";

export default {
  data() {
    return {
      role: ''
    }
  },

  computed: {
    $storage() {
      return $storage
    }
  },
  async mounted() {
    await this.init();
  },

  methods: {
    async init() {
      if (this.$storage.get('Token')) {
        let userData = this.$storage.get('Token');
        if (!userData) {
          router.push({name: "login"});
        } else {
          // 在这里调用 getRoleOn 以获取角色信息
          await this.getRoleOn();
        }
      } else {
        router.push({name: 'login'});
      }
    },

    async getRoleOn() {
      await getRole().then(data => {
        this.role = data;
      });
    }
  }

};

</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 500px;
  text-align: center;

  .main-text {
    font-size: 38px;
    font-weight: bold;
    margin-top: 15%;
  }

  .text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
}
</style>